﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <!--
    c't Longitude - A reimplementation of Googles discontinued Latitude app.
    Copyright (c) 2013 Oliver Lau <ola@ct.de>, Heise Zeitschriften Verlag

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <title>c't Longitude</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="application-name" content="c't Longitude" />
  <meta name="author" content="Oliver Lau" />
  <meta name="description" content="Track your friends with this reimplementation of Googles discontinued Latitude app." />
  <meta name="keywords" content="Latitude, Longitude, GPS, location services, friend tracker" />
  <meta name="dcterms.rights" content="This program is free software licensed under the GNU General Public License v3 or later." />
  <meta name="dcterms.rightsHolder" content="Oliver Lau, Heise Zeitschriften Verlag, Redaktion c't" />
  <meta name="dcterms.dateCopyrighted" content="2013, 2014" />
  <script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyBzusozp0-LpukVgJcQyebnf7zixiOdL3c&libraries=geometry&sensor=false"></script>
  <script src="js/jquery-2.1.0.min.js"></script>
  <script src="js/spectrum.js" type="text/javascript"></script>
  <script src="js/util.js" type="text/javascript"></script>
  <script src="js/ctlon.js" type="text/javascript"></script>
  <script src="js/version.js" type="text/javascript"></script>
  <link rel="stylesheet" href="css/spectrum.css" />
  <link rel="stylesheet" href="css/ctlon.css" />
  <link rel="icon" href="img/favicon.png" type="image/png" />
  <!-- <link rel="apple-touch-icon" href="img/apple-touch-icon.png"/> -->
  <!-- <link rel="apple-touch-startup-image" href="img/apple-touch-startup-image.png" /> -->
  <script type="text/javascript">
    $(document).ready(CTLON.init);
  </script>
</head>
<body>
  <div id="app" class="show" style="visibility: hidden;">
    <div id="map-canvas"></div>
    <div id="info-bar-container">
      <div id="info-bar">
        <span id="userid" class="buddy"></span>
        <span id="buddy-container"><span id="buddies"></span></span>
        <span id="menu-container"><span id="settings-icon" title="Extras"></span></span>
      </div>
    </div>
    <div id="settings">
      <header>Einstellungen</header>
      <table>
        <tbody>
          <tr>
            <th colspan="2">Lokale Einstellungen</th>
          </tr>
          <tr>
            <td>
              <input type="checkbox" name="show-tracks" id="show-tracks" />
            </td>
            <td>
              <label for="show-tracks">Tracks anzeigen</label>
              <div class="hint">Bei der Auswahl eines Users anzeigen, wo er in der Vergangenheit gewesen ist.</div>
            </td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" name="show-accuracy" id="show-accuracy" />
            </td>
            <td>
              <label for="show-accuracy">Standortgenauigkeit visualisieren</label>
              <div class="hint">Einen Kreis um den Standort zeichnen, der die geschätzte Genauigkeit widerspiegelt.</div>
            </td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" name="incognito" id="incognito" checked="checked" />
            </td>
            <td>
              <label for="incognito">Inkognito bleiben</label>
              <div class="hint">Es werden keine Informationen über den eigenen Standort an den Server gesendet.</div>
            </td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" name="offline-mode" id="offline-mode" />
            </td>
            <td>
              <label for="offline-mode">Offline-Modus</label>
              <div class="hint">Standort-Daten zwischenspeichern und erst an Server senden, wenn Offline-Modus wieder deaktiviert.</div>
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <label for="max-location-age">Maximales Alter von Standortinformationen</label>
              <div class="hint">Ältere Standorte werden nicht angezeigt.</div>
              <select name="max-location-age" id="max-location-age">
                <option value="300">5 Minuten</option>
                <option value="1800">30 Minuten</option>
                <option value="3600">1 Stunde</option>
                <option value="7200">2 Stunden</option>
                <option value="86400">24 Stunden</option>
                <option value="604800">1 Woche</option>
                <option value="2419200">1 Monat</option>
                <option value="31557600">1 Jahr</option>
                <option value="-1">unbegrenzt</option>
              </select>

            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <label for="max-waypoint-age">Maximales Alter von Track-Daten</label>
              <div class="hint">Ältere Wegpunkte werden nicht angezeigt.</div>
              <select name="max-waypoint-age" id="max-waypoint-age">
                <option value="3600">1 Stunde</option>
                <option value="7200">2 Stunden</option>
                <option value="86400">24 Stunden</option>
                <option value="604800">1 Woche</option>
                <option value="2419200">1 Monat</option>
                <option value="31557600">1 Jahr</option>
                <option value="-1">unbegrenzt</option>
              </select>
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <label for="range-constraint">Nur Freunde im Umkreis anzeigen</label>
              <div class="hint">Weiter entfernte Freunde erscheinen nicht in der Freundes-Leiste.</div>
              <select name="range-constraint" id="range-constraint">
                <option value="0">Kartenausschnitt</option>
                <option value="100">100 Meter</option>
                <option value="500">500 Meter</option>
                <option value="1000">1 Kilometer</option>
                <option value="5000">5 Kilometer</option>
                <option value="100000">100 Kilometer</option>
                <option value="-1">unbegrenzt</option>
              </select>
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <label for="max-waypoint-age">Aktualisierungsintervall</label>
              <div class="hint">In welchen Abständen sollen Daten der Freunde abgerufen werden?</div>
              <select name="polling-interval" id="polling-interval">
                <option value="15">15 Sekunden</option>
                <option value="30">30 Sekunden</option>
                <option value="60">1 Minute</option>
                <option value="300">5 Minuten</option>
                <option value="900">15 Minuten</option>
              </select>
            </td>
          </tr>
          <tr>
            <th colspan="2">Globale Einstellungen</th>
          </tr>
          <tr>
            <td>
              <input type="checkbox" name="share-my-tracks" id="share-my-tracks" />
            </td>
            <td>
              <label for="share-my-tracks">Meine Tracks mit anderen teilen</label>
              <div class="hint">Andere dürfen sehen, wo ich gewesen bin.</div>
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <label for="avatar">Avatar</label>
              <div class="hint">optimales Bildmaß: <span id="avatar-optimal-width"></span>&nbsp;&times;&nbsp;<span id="avatar-optimal-height"></span>&nbsp;Pixel</div>
              <div>
                <div id="avatar"></div>
                <input type="text" class="colorpicker" />
                <span class="hint">Hintergrundfarbe</span>
              </div>
              <input type="file" accept="image/*" name="avatar-file" id="avatar-file" />
            </td>
          </tr>
          <tr class="no-mobile">
            <th colspan="2">Upload</th>
          </tr>
          <tr class="no-mobile">
            <td></td>
            <td>
              <label for="track-file">GPX</label>
              <div class="hint">Track-Dateien im GPX-Format hochladen.</div>
              <input type="file" name="track-file" id="track-file" multiple="multiple" />
              <div id="track-file-loader-icon" style="visibility: hidden"></div>
            </td>
          </tr>
          <tr>
            <th colspan="2">Extras</th>
          </tr>
          <tr>
            <td></td>
            <td><button id="xfer-current-location">aktuellen Standort übertragen</button></td>
          </tr>
          <tr>
            <td></td>
            <td><button id="logout">Abmelden</button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div id="logon">
    <h1>c't Longitude</h1>
    <div id="loader-icon"></div>
    <!-- Login with Google -->
    <span id="googleSigninButton">
      <span class="g-signin"
        data-callback="googleSigninCallback"
        data-clientid=""
        data-cookiepolicy="single_host_origin"
        data-theme="dark"
        data-height="tall"
        data-width="wide"
        data-scope="profile"></span>
    </span>
    <footer>c't&nbsp;Longitude <span id="version"></span>, Copyright &copy;&nbsp;2013&ndash;2014 <a href="mailto:ola@ct.de">Oliver&nbsp;Lau</a>, Heise Zeitschriften Verlag. Alle Rechte vorbehalten.
      &mdash; <a href="readme.html">Nutzungshinweise</a>
    </footer>
  </div>
</body>
</html>
